<template>
    <el-dialog 
    :title="firstDialogStatus.title1" 
    :visible.sync="firstDialogStatus.visible1" 
    :before-close="firstDialogStatus.beforeClose1"
    :width="firstDialogStatus.width1"
    :fullscreen="firstDialogStatus.fullscreen1"
    :close-on-click-modal="firstDialogStatus.closeOnClickModal1"
    :modal-append-to-body='false'
    :modal='false'
    >
        <slot v-if="dialogShow"></slot>

        <div v-if="firstDialogStatus.showFirstFoot" slot="footer" class="dialog-footer">
            <el-button @click="closeDialog1">取消</el-button>
            <el-button type="primary" @click="confirmDialog1">确认</el-button>
        </div>
    </el-dialog>
  </template>
  
  <script>

  import { mapState } from 'vuex'
  export default {
    name: "twoLevelDialog",
    data(){
      return {
        dialogShow:false
      }
    },
    computed: mapState({
        firstDialogStatus: (state) => state.twoLevelDialogVuex.dialogStatus1,  //  映射 
        twoDialogStatus: (state) => state.twoLevelDialogVuex.dialogStatus2, //  映射
    }),

    methods: {
        closeDialog1(){
            this.$emit("outDialog1",{
                close: true
            })
            this.$store.commit('twoLevelDialogVuex/ChangeOneDialog', {
                visible1: false,
            })
        },
        confirmDialog1(){
            this.$emit("outDialog1",{
                confirm: true
            })
            this.$store.commit('twoLevelDialogVuex/ChangeOneDialog', {
                visible1: false,
            })
        },
        closeDialog2(){
            this.$emit("outDialog2",{
                close: true
            })
            this.$store.commit('twoLevelDialogVuex/ChangeTwoDialog', {
                visible1: false,
            })
        },
        confirmDialog2(){
            this.$emit("outDialog2",{
                confirm: true
            })
            this.$store.commit('twoLevelDialogVuex/ChangeTwoDialog', {
                visible1: false,
            })
        },

    },
    watch:{
        'firstDialogStatus.visible1'(){
            if(this.firstDialogStatus.visible1){
                let t = this.firstDialogStatus.title1;
                setTimeout(()=>{
                    this.dialogShow = true;
                },t == '查看'? 20: 50)
            }else{
                setTimeout(()=>{
                    this.dialogShow = false;
                },50)
            }
        }
    }
  };
  </script>
  <style scoped lang="scss">

  </style>
  <style lang="scss">

</style>
  